<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			h1 {
				color: darkorange;
			}
			th {
				color: darkorange;
				font-family: "Apple Color Emoji";
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<div id="test">
			{{msg}}
			<login></login>
			<register-user></register-user>
			<search></search>
			<data-table></data-table>
			<my-com></my-com>
			<template id="tmpl1">
				<table>
					<thead>
						<th>
							编号
						</th>
						<th>
							姓名
						</th>
						<th>
							爱吃
						</th>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>王子元</td>
							<td>火锅</td>
						</tr>
					</tbody>
				</table>
			</template>
		</div>
		<script>
			// 全局方式定义组件
			// 组件的元素必须由单一元素包裹
			Vue.component("login",{
				template: `<div>
								<h1>login</h1>
								<h1>login</h1>
							</div>`
			})

			// 组件若是由驼峰法命名，则组件引用时必须使用中横线
			Vue.component("registerUser",{
				template: "<h1>registerUser</h1>"
			})

			// 使用extend 结合component来定义全局组件
			let search = Vue.extend({
				template: "<h1>search</h1>"
			})
			Vue.component("search",search)

			// 创建table组件
			Vue.component('data-table',{
				template: "#tmpl1"
			})

			//创建组件
			let myCom = Vue.extend({
				template: "<h1>myCom</h1>"
			})
			let vue = new Vue({
					el:'#test',
					data:{
						msg:'王子元有一个充满智慧的小脑瓜！'
					},
					methods:{

					},
					//注册私有组件
					components:{
						"my-com" : myCom
						//"myCom" : myCom 左右完全相同时可如最后一种方式
						//myCom
					}
				})
		</script>
	</body>
</html>
